<template>
  <view>
    <up-popup
      closeable
      :show="tasgData.tagsFlag"
      @close="close"
      @open="open"
      :customStyle="{
        padding: '50rpx 0 0 0',
      }"
    >
      <view class="tag-box">
        <view class="u-page__tags">
          <view
            class="tags-item"
            v-for="(item, index) in tasgData.tagsList"
            :key="index"
          >
            <up-tag
              style="text-align: center"
              size="large"
              shape="circle"
              :text="item.showName"
              :plain="checkedList.indexOf(item.showName) >= 0 ? false : true"
              :name="item.showName"
              @click="checkboxClick"
            >
            </up-tag>
          </view>
        </view>

        <view class="tags-content-area">
          <up-textarea
            maxlength="20"
            v-model="tasgData.tagsContent"
            placeholder="请输入自定义内容"
          ></up-textarea>
        </view>
        <up-button type="primary" text="确认" @click="onOk"></up-button>
      </view>
    </up-popup>
  </view>
</template>
<script setup>
import { ref, defineProps, watch, defineEmits } from "vue";
const setKey = ref("showName");
const checkedList = ref([]);
const emits = defineEmits(["confirmData"]);
const props = defineProps({
  tasgData: {
    type: Object,
    default: () => {
      return {
        tagsList: [], //tag列表
        tagsFlag: false, //是否展示popup
        tagsContent: "", //输入框
        tagsChecked: [], //默认选中的
      };
    },
  },
});

const onOk = () => {
  emits("confirmData", props.tasgData);
};
watch(props.tasgData, (newVal) => {
  checkedList.value = newVal.tagsChecked;
});
const checkboxClick = (node) => {
  if (checkedList.value.indexOf(node) >= 0) {
    checkedList.value.find((item, index) => {
      if (item == node) {
        checkedList.value.splice(index, 1);
      }
    });
    return;
  }
  checkedList.value.push(node);
};
const close = () => {
  emits("confirmData", props.tasgData);
};

const open = () => {};
</script>

<style lang="scss" scoped>
.tag-box {
  padding: 40rpx 30rpx;
  .u-page__tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;

    // grid-template-columns: repeat(4, 1fr); /* 每行 5 列 */
    // grid-gap: 20rpx; /* 设置项目之间的间距 */
    .tags-item {
      margin: 0 20rpx 20rpx 0px;
      // flex: 1 1 calc(22%); /* 让每个 item 占 1/5 的宽度，减去间隙 */
      // box-sizing: border-box; /* 确保宽度计算时包含 padding 和 border */
      // text-align: center;
    }
  }
  .u-tag--larg {
    text-align: center !important;
  }
  .tags-content-area {
    margin-block: 20rpx;
  }
}
</style>
